<template>
  <div class="page-container">
    <el-card shadow="none">
      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="dialogAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <div class="table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          row-key="id"
          :tree-props="{children: 'children'}"
          @selection-change="onSelect"
        >
          <el-table-column prop="name" label="名称" align="center" />
          <el-table-column prop="modelType" label="类型" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.modelType" type="info">{{ scope.row.modelType | getModelType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center" />
          <el-table-column prop="authority" label="授权标识" align="center" />
          <el-table-column prop="icon" label="图标" align="center" />
          <el-table-column prop="modelType" label="打开方式" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.openStyle">{{ scope.row.modelType | getModelType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogEdit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                @click="onDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>

    <AddForm ref="addForm" title="添加" @save="closeAdd" />
    <EditForm ref="editForm" title="编辑" @save="closeAdd" />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import AddForm from '@/views/system/permission/addForm'
import EditForm from '@/views/system/permission/editForm'
import { http_permission } from '@/api'
import { dict_modelType, dict_openStyle } from '@/dict'
export default {
  components: { AddForm, EditForm },
  filters: {
    getModelType(val) {
      return dict_modelType[val]
    },
    getOpenStyle(val) {
      return dict_openStyle[val]
    }
  },
  mixins: [crud],
  data() {
    return {
      request: {
        ...http_permission,
        list: http_permission.tree
      },
      searchParams: {
      },
      tableData: [
      ],
      columns: [
        { prop: 'name', label: '名称', width: '', minWidth: '200px' },
        { prop: 'icon', label: '图标', width: '', minWidth: '' },
        { prop: 'modelType', label: '类型', width: '', minWidth: '' },
        { prop: 'openStyle', label: '打开方式', width: '', minWidth: '' },
        { prop: 'sort', label: '排序', width: '', minWidth: '' },
        { prop: 'url', label: '路由', width: '', minWidth: '' },
        { prop: 'authority', label: '授权标识', width: '', minWidth: '' }
      ]
    }
  },
  methods: {
    dialogAdd() {
      this.$refs.addForm.open()
    },
    dialogEdit(item) {
      this.$refs.editForm.open(item)
    },
    closeAdd() {
      this.onSearch()
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
